<template>
	<div>
		<!-- 顶部信息栏 -->
		<div class="top_nav">
			<div class="top_nav_left"><van-icon name="arrow-left" @click="back"/></div>
			<div class="top_nav_mid">严选专栏</div>
		</div>
		
		<div class="mid_mid"></div>
		
		<!-- 信息栏下面的card -->
		<div class="card_body">
			<div class="card_item" v-for="(item,index) in this.$store.state.ZhuaninnerList" :key="index">
				<img :src="item.pic">
				<div class="card_item_font">{{item.title}}</div>
				<p class="card_item_font_two">{{item.descript}}</p>
				<p class="card_item_font_round" @click="inin(item.id)">查看详情</p>
			</div>
		</div>
		
		<div class="mid_mid_two"></div>
		
	</div>
</template>

<script>
	export default {
		mounted() {
			this.$APIClient.HiscrollItem().then(res => {
				// console.log(res.data.data)
				this.$store.state.ZhuaninnerList = res.data.data
			});
			
		},
		methods:{
			back(){
				window.history.go(-1)
			},
			inin(id){
				this.$router.push({
					path:'Zhuaninfo',
					query:{
						id : id
					}
				})
			}
		}
	}
</script>

<style scoped>
	.top_nav
	{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 4.6rem;
		align-items: center;
	}
	
	.top_nav_mid
	{
		margin-left: 10.2rem;
		margin-top: -4px;
	}
	
	.mid_mid
	{
		height: 42px;
	}
	
	.top_nav_left
	{
		margin-left: 2.7rem;
	}
	
	.card_body
	{
		width: 100%;
	}
	
	.card_item
	{
		width: 100%;
		height: 20rem;
		margin-bottom: 0.5rem;
	}
	
	.card_item img
	{
		width: 100%;
		height: 100%;
	}
	
	.card_item_font
	{
		color: white;
		position: relative;
		top : -15rem;
		left: 20%;
		font-size: 1.8rem;
	}
	
	.card_item_font_two
	{
		/* width: 80px; */
		overflow: hidden;
		color: white;
		position: relative;
		top : -15rem;
		left: 1%;
		font-size: 1.3rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.card_item_font_round
	{
		color: #fff;
		width: 60px;
		height: 25px;
		border: 1px solid #fff;
		position: relative;
		top : -15rem;
		left: 30%;
		padding-top: 5px;
		padding-left: 5px;
		border-radius: 3rem;
		margin-left: 30px;
	}
	
	.mid_mid_two
	{
		height: 70px;
	}
</style>
